<template>
  <div class="views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">团长信息</div>
      <div class="wlm-form-content">
        <el-form :ref="formFormatData.key" :model="formFormatData.formData" type='small' :rules="formFormatData.rules" label-width="150px" label-position="right">
          <el-form-item label="选择用户（团长）" v-if="!isEdit" prop="user_id">
            <chooseUser :config="initChooseUser" ref="chooseUser" :changeEvt="userChange">
            </chooseUser>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formFormatData.formData.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formFormatData.formData.phone"></el-input>
          </el-form-item>

          <!-- <el-form-item label="工作日期" prop="work_date">
            <el-checkbox-group v-model="formFormatData.formData.work_date">
              <el-checkbox v-for="day in days" :label="day.label" :key="day.label">{{day.title}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->

          <el-form-item label="所在地址" class="city" prop="province_id">
            <city-select :config="initCityList" ref="cityselect" :changeEvt="formFormatFiltersChange"></city-select>
          </el-form-item>
          <el-form-item label="详细地址" prop="detail">
            <el-input v-model="formFormatData.formData.detail" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="所在小区" prop="community">
            <el-input v-model="formFormatData.formData.community" placeholder="请填写所在小区"></el-input>
          </el-form-item>

          <el-form-item label="小区门牌号" prop="house_num">
            <el-input v-model="formFormatData.formData.house_num" placeholder="请填写所在小区"></el-input>
          </el-form-item>
          <el-form-item label="地图定位：" prop="lng">
             <baidu-map ref="map" :config="initMapList" :changeEvt="formFormatFiltersChange"></baidu-map>
          </el-form-item>
        </el-form>
      </div>
      <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/application/leaderManagement', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/application/leaderManagement">
          <el-button size="small">返回</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import ChooseUser from '@/components/ChooseUser/index'
import BaiduMap from '@/components/BaiduMap/index'
import CitySelect from '@/components/CitySelect/index'
import mixins from '@/mixins/mixins'
import { regdetail, regsave } from '@/api/commityBuy'
import { checkArrhasData, checkPhone, checkObjhasData } from '@/utils/validate'
export default {
  mixins: [mixins.getters('Form')],
  data() {
    return {
      initChooseUser: {
        closable: true,
        initList: []
      },
      formFormatData: {
        key: 'addLeaderForm',
        api: {
          editForm: {
            api: regdetail,
            params: {
              reg_id: this.$route.query.reg_id
            },
            redirect: 'reg_id',
            filters: {
              address: {
                bindInit: ['initCityList']
              },
              map: {
                bindInit: ['initMapList']
              }
            }
          },
          submitForm: regsave
        },
        formData: {
          work_date: ['0', '1', '2', '3', '4', '5', '6'], // 工作日期
          name: '', // 姓名
          detail: '', // 所在小区
          community: '',
          house_num: '',
          user_id: '',
          phone: '',
          province_id: {},
          reg_id: this.$route.query.reg_id,
          city_id: {},
          region_id: {},
          lng: '',
          lat: '',
          mapAddress: ''

        },
        rules: {
          name: [{ required: true, message: '请输入团长姓名', trigger: 'blur' }],
          user_id: [{ required: true, message: '请选择用户', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: checkPhone, message: '请输入正确的手机号', trigger: ['change', 'blur'] }],
          house_num: [{ required: true, message: '请输入门牌号', trigger: 'blur' }],
          province_id: [{ required: true, message: '请选择地址', trigger: 'blur' }, { validator: checkObjhasData, message: '请选择地址', trigger: ['blur'] }],
          reg_id: [{ required: true, message: '请选择地址', trigger: 'blur' }, { validator: checkObjhasData, message: '请选择地址', trigger: ['blur'] }],
          region_id: [{ required: true, message: '请选择地址', trigger: 'blur' }, { validator: checkObjhasData, message: '请选择地址', trigger: ['blur'] }],
          // lng: [{  required: true, message: '请地图定位', trigger: 'blur' }],
          detail: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
          community: [{ required: true, message: '请输入小区地址', trigger: 'blur' }],
          work_date: [{ required: true, message: '请选择工作日期', trigger: 'blur' }, { validator: checkArrhasData, message: '请选择工作日期', trigger: ['blur'] }]
        }

      },

      initMapList: {
        initList: [
        ],
        bindKey: { key: [{ 'name': 'lng', type: 'String' }, { 'name': 'lat', type: 'String' }, { 'name': 'mapAddress', type: 'String' }], model: 'map' }
      },
      initCityList: {
        initList: [
          //   { id: '130000', value: '河北省' },
          //   { id: '130100', value: '石家庄市' },
          //   { id: '130102', value: '长安区' }
        ],
        bindKey: { key: [{ 'name': 'province_id', type: 'String' }, { 'name': 'city_id', type: 'String' }, { 'name': 'region_id', type: 'String' }], model: 'address' }
      },
      days: [{
        title: '星期一',
        label: '0'
      }, {
        title: '星期二',
        label: '1'
      }, {
        title: '星期三',
        label: '2'
      }, {
        title: '星期四',
        label: '3'
      }, {
        title: '星期五',
        label: '4'
      }, {
        title: '星期六',
        label: '5'
      }, {
        title: '星期天',
        label: '6'
      }]
    }
  },
  watch: {
    'formFormatData.formData.lng': {
      handler(val) {
        console.log(val, '==============val')
        !val || val == '0' ? this.formFormatData.formData.lng = '116.404288' : ''
      },
      immediate: true
    },
    'formFormatData.formData.lat': {
      handler(val) {
        !val || val == '0' ? this.formFormatData.formData.lat = '39.918242' : ''
      },
      immediate: true
    }
  },
  computed: {
    isEdit() {
      return !!this.$route.query.reg_id
    }
  },
  components: {
    ChooseUser,
    BaiduMap,
    CitySelect

  },
  methods: {
    userChange(userlist) {
      const [item] = userlist
      this.formFormatData.formData.user_id = item ? item.user_id : ''
    }
  }

}
</script>

<style>
</style>
